<template>
    <div>
      <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>违规信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
        <div>
          <!--    功能区-->
          <div style="margin: 10px 0">
            <!--    搜索区-->
            <div style="margin: 10px 0">
              <el-input v-model.number="search" clearable placeholder="请输入违规学生姓名" prefix-icon="el-icon-search"
                        style="width: 20%"/>
              <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;">搜索</el-button>
              <el-button icon="el-icon-refresh-left" style="margin-left: 5px;background-color: #143371; color: aliceblue;"  @click="reset">重置</el-button>
              <div style="float: right">
                
                <el-tooltip content="添加违规记录" placement="top">
                    
                  <el-button style="background-color: #143371; color: aliceblue;width: 40px;" icon="el-icon-plus" @click="add"></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
          <!--    表格-->
          <el-table v-loading="loading" :data="tableData"  max-height="1000" style="width: 100%">
            <el-table-column label="#" type="index"/>
            <el-table-column v-if ='false' label="编号" prop="vrId"/>
            <el-table-column label="学生学号" prop="stuId"/>
            <el-table-column label="学生姓名" prop="stuName"/>
            <el-table-column label="楼栋号" prop="ldId"> 
            </el-table-column>
            <el-table-column label="房间号" prop="roomId"/>
            <el-table-column label="违规原因" prop="vrReason"/>
            <el-table-column label="违规日期" prop="vrDate"/>
            <!--      操作栏-->
            <el-table-column label="操作" width="150px" >
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div style="margin: 10px 0">
            <el-pagination
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <div>
            <!--      弹窗-->
            <el-dialog  :visible.sync="dialogVisible" title="操作" width="30%" @close="cancel">
              <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="学生学号" prop="stuId">
                  <el-input v-model.number="form.stuId" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名" prop="stuName">
                  <el-input v-model.trim="form.stuName" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="楼栋号" prop="ldId">
                  <el-input v-model.number="form.ldId" style="width: 80%"></el-input>
                </el-form-item>
                
                <el-form-item label="房间号" prop="roomId">
                    <el-input v-model.number="form.roomId" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="违规原因" prop="vrReason">
                  <el-input  type="textarea"
                        :rows="2"
                        placeholder="请输入内容" 
                        v-model.trim="form.vrReason" style="width: 80%"
                  ></el-input>
                </el-form-item>
                  <el-form-item label="违规日期" prop="vrDate">
                    <el-date-picker
                    v-model="form.vrDate"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
              </el-form>

              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="cancel">取 消</el-button>
                  <el-button type="primary" @click="save">确 定</el-button>
                </span>
              </template>
              
            </el-dialog>
          </div>
        </div>
      </el-card>
    </div>
  </template>
<script>
import request from '@/utils/request'
export default {
    name: "visitinfo",
    data() {
        return {
            loading: true,
            editJudge: true,
            judge: false,
            dialogVisible: false,
            search: null,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [
                {
                    vrId:null,
                    stuId:null,
                    stuName:null,
                    ldId:null,
                    roomId:null,
                    vrReason:null,
                    vrDate:null
                }
            ],
            form: {
                    
                    vrId:null,
                    stuId:null,
                    stuName:null,
                    ldId:null,
                    roomId:null,
                    vrReason:null,
                    vrDate:null
            },
            rules: {
                stuId: [
                    {required: true, message: "请输入学生学号", trigger: "blur"},
                    {type: "number", message: "必须为数字值", trigger: "blur"},
                ],
                stuName: [
                    {required: true, message: "请输入学生姓名", trigger: "blur"}
                ],
                ldId: [
                    {required: true, message: "请输入被楼栋号", trigger: "blur"},
                    {type: "number", message: "必须为数字值", trigger: "blur"},
                ],
                roomId: [{required: true, message: "请输入房间号", trigger: "blur"},
                {type: "number", message: "必须为数字值", trigger: "blur"},],
                vrReason: [
                  {required: true, message: "输入原因", trigger: "blur"} 
                ],
                vtTime: [{required: true, message: "不能为空", trigger: "blur"}],

                
            },
            editDisplay: {
                display: "block",
            },
            display: {
                display: "none",
            },
        };
    },
    created() {
        this.load();
        this.loading = true;
        setTimeout(() => {
            //设置延迟执行
            this.loading = false;
        }, 1000);
    },
    methods:{
        async load(){
          request.get("/vr/find", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    search: this.search,
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        reset() {
            this.search = null
            request.get("/vr/find", {
                params: {
                    pageNum: 1,
                    pageSize: this.pageSize,
                    search: this.search,
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        handleDelete(index,row){
            // 确认框确认是否要删除
            this.$confirm("确定要删除吗?", "删除提示", {
                iconClass: "el-icon-question", //自定义图标样式
                confirmButtonText: "残忍删除", //确认按钮文字
                cancelButtonText: "取消删除", //取消按钮文字
                showClose: true, //是否显示右上角关闭按钮
                type: "warning", //提示类型  success/info/warning/error
            }).then(()=> {  //选择确认按钮进入此方法
                //确认操作
                //发删除数据delete
                
                  request.delete("vr/delete/"+row.vrId).then(res=>{
                
                  if(res.code==="1"){
                    this.$message({
                      type:'success',
                      message:'删除成功'
                    })
                    this.load()
                  }
                  else{
                    this.$message({
                      type:'error',
                      message:res.msg
                    })
                  }
                })
                
            }).catch(() => { //选择取消按钮进入此方法
                //取消操作
                alert('取消')
            });    
        },
        handleEdit(index, row){
            this.judge = true;
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.$refs.form.resetFields();
                this.form = JSON.parse(JSON.stringify(row));
                this.editDisplay = {display: "block"};
            });
        },
        cancel(){
          this.$refs.form.resetFields();
          this.dialogVisible=false;
        },
        save(){
          this.$refs.form.validate(vaild=>{
            if(vaild){
              if(this.judge){
                //先表单验证，再放put请求
                request.put("/vr/update",this.form).then(res=>{
                  if(res.code === "1"){
                    this.$message({
                      type:'success',
                      message:'修改成功'
                    })
                    this.search=null
                    this.form={}
                    this.load();
                    this.dialogVisible=false
                  }
                  else{
                    this.$message({
                      type:'error',
                      message:res.msg
                    })
                  }
                })
            }
            else{
                //发post请求
                console.log(1)
                request.post("/vr/add",this.form).then(res=>{
                  if(res.code === "1"){
                    this.$message({
                      type:'success',
                      message:'添加成功'
                    })
                    this.search=null,
                    this.load();
                    this.dialogVisible=false
                  }
                  else{
                    this.$message({
                      type:'error',
                      message:res.msg
                    })
                  }
                })
             }
            }
          })
            
           
        },
        add(){
            this.dialogVisible = true;
            this.judge = false;
        },
        handleSizeChange(pageSize) {
            //改变每页个数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            //改变页码
            this.currentPage = pageNum;
            this.load();
        },

    }
    

}
</script>